<template>
  <!-- 店长看板 -->
  <div class="active">
    <div class="top_wrap pt-16">
      <div
        v-for="(item, _index) in tabList"
        :key="_index"
        class="tab_item"
        :class="type === item.index ? 'active_tab_item' : ''"
        @click="chooseTab(item)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="content_wrap">
      <!-- 业绩 -->
      <div class="conter_item left_wrap">
        <!-- <div class="left_item">
          <div class="l_name">业绩(元)</div>
          <div class="l_number">0.03</div>
        </div> -->
        <div class="center_item">
          <div class="c_name">月指标</div>
          <div>{{ totalPerformanceList.monthTarget || 0 }}</div>
        </div>
        <div class="right_item">
          <div class="r_name">月达成率</div>
          <div>{{ totalPerformanceList.monthAchievingRate || 0 }}%</div>
        </div>
      </div>
      <!-- 交易 -->
      <div class="conter_item centre_wrap">
        <div class="centre_top_item">
          <div>销售</div>
          <!-- <div>成交数量</div> -->
          <div>退货</div>
        </div>
        <div class="centre_bottom_item">
          <!-- <div>0</div>
          <div>0</div> -->
          <div class="c_cj">
            <div>{{ totalPerformanceList.sellNumber || 0 }}</div>
            <div>{{ totalPerformanceList.sellMoney || 0 }}</div>
          </div>
          <div style="color: #ff1e10">
            {{ totalPerformanceList.outNumber || 0 }}
          </div>
          <div>{{ totalPerformanceList.outMoney || 0 }}</div>
        </div>
      </div>
      <!-- 单价 -->
      <div class="conter_item right_wrap">
        <div class="right_item">
          <div class="r_name">客单价</div>
          <div class="r_number">
            {{ totalPerformanceList.customerOnePrice || 0 }}
          </div>
        </div>
        <div class="center_item">
          <div class="c_name">件单价</div>
          <div>{{ totalPerformanceList.pieceOnePrice || 0 }}</div>
        </div>
        <div class="right_item">
          <div class="r_name">连带率</div>
          <div class="r_number">
            {{ totalPerformanceList.associatedPurchaseRate || 0 }}%
          </div>
        </div>
        <div class="right_item">
          <div class="r_name">款销率</div>
          <div>100%</div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom_wrap">
        <div class="bottom_item bottom_left">
          <div class="l_name">在途调货</div>
          <div class="l_table">
            <el-table
              :data="transferGoodsList"
              style="width: 100%"
              :header-cell-style="{
                background: '#f4f4f4',
                padding: 0,
                height: '40px'
              }"
              :cell-style="{ padding: 0, height: '26px' }"
              highlight-current-row
              border
              height="250"
              max-height="300"
            >
              <el-table-column prop="receiptsNumber" label="单号">
              </el-table-column>
              <el-table-column prop="transferCargoTime" label="日期">
              </el-table-column>
              <el-table-column prop="cooperateWay" label="类型">
              </el-table-column>
              <el-table-column prop="callout" label="调出客户">
              </el-table-column>
              <el-table-column prop="fold" label="调入客户"> </el-table-column>
              <el-table-column prop="number" label="数量"> </el-table-column>
              <el-table-column prop="operator" label="操作员">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="bottom_item bottom_right">
          <div class="r_name">VIP回访</div>
          <div class="r_table">
            <el-table
              :data="vipReturnVisitList"
              style="width: 99%"
              :header-cell-style="{
                background: '#f4f4f4',
                padding: 0,
                height: '40px'
              }"
              :cell-style="{ padding: 0, height: '26px' }"
              highlight-current-row
              border
              height="250"
              max-height="300"
            >
              <el-table-column prop="phone" label="卡号"> </el-table-column>
              <el-table-column prop="name" label="姓名"> </el-table-column>
              <el-table-column prop="sex" label="性别"> </el-table-column>
              <el-table-column prop="returnNumber" label="次数">
              </el-table-column>
              <el-table-column prop="returnRemark" label="回访原因">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="bottom_wrap">
        <div class="bottom_item bottom_left">
          <div class="l_name">销售排行</div>
          <div class="l_table">
            <el-table
              :data="salesRankingList"
              style="width: 100%"
              :header-cell-style="{
                background: '#f4f4f4',
                padding: 0,
                height: '40px'
              }"
              :cell-style="{ padding: 0, height: '26px' }"
              highlight-current-row
              border
              height="250"
              max-height="300"
            >
              <el-table-column prop="kindsNumber" label="货号" width="120px">
              </el-table-column>
              <el-table-column prop="colorName" label="颜色">
                <template slot-scope="scope">
                  <span>{{ scope.row.colorNo }}</span>
                  <span>{{ scope.row.colorName }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="sellNumber" label="总数量">
              </el-table-column>
              <el-table-column prop="sellMoney" label="销售金额">
              </el-table-column>
              <el-table-column prop="dailyNumber" label="日均量">
              </el-table-column>
              <el-table-column prop="customerRepertory" label="库存">
              </el-table-column>
              <el-table-column prop="days" label="天数"> </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="bottom_item bottom_right">
          <div class="r_name">业绩分析</div>
          <div class="r_table">
            <el-table
              :data="performanceList"
              style="width: 100%"
              :header-cell-style="{
                background: '#f4f4f4',
                padding: 0,
                height: '40px'
              }"
              :cell-style="{ padding: 0, height: '26px' }"
              highlight-current-row
              border
              height="300"
              max-height="300"
            >
              <el-table-column prop="personnelName" label="营业员">
              </el-table-column>
              <el-table-column prop="dayPerformance" label="今日业绩">
              </el-table-column>
              <el-table-column prop="weekPerformance" label="本周业绩">
              </el-table-column>
              <el-table-column prop="monthTarget" label="本月指标">
              </el-table-column>
              <el-table-column prop="monthPerformance" label="本月业绩">
              </el-table-column>
              <el-table-column
                prop="monthAchievingRate"
                label="本月达成率"
                width="120px"
              >
              </el-table-column>
              <el-table-column prop="customerOnePrice" label="客单价">
              </el-table-column>
              <el-table-column prop="pieceOnePrice" label="件单价">
              </el-table-column>
              <el-table-column prop="associatedPurchaseRate" label="连带率">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="bottom_wrap">
        <div class="bottom_item bottom_left">
          <div class="l_name">可用促销</div>
          <div class="l_table">
            <el-table
              :data="availablePromotionsList"
              style="width: 100%"
              :header-cell-style="{
                background: '#f4f4f4',
                padding: 0,
                height: '40px'
              }"
              :cell-style="{ padding: 0, height: '26px' }"
              highlight-current-row
              border
              height="350"
              max-height="350"
            >
              <el-table-column prop="startTime" label="开始时间">
              </el-table-column>
              <el-table-column prop="endTime" label="截止时间">
              </el-table-column>
              <el-table-column prop="brandedName" label="促销内容">
              </el-table-column>
              <el-table-column prop="discount" label="折数"> </el-table-column>
              <el-table-column prop="remark" label="备注"> </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="bottom_item bottom_right line">
          <div class="r_name sales">
            <div class="left_sales">销售趋势</div>
          </div>
          <div class="r_table line_wrap">
            <div class="null_data">
              <div class="left_sales">
                <span v-if="!salesTrendListList.length">暂无数据</span>
              </div>
            </div>
            <div class="left_line" id="lineDom"></div>
            <!-- <div class="right_line">
              <div class="max_number">
                <div>2,000,000</div>
                <div>最大值</div>
              </div>
              <div class="max_number">
                <div>1,300,000</div>
                <div>平均值</div>
              </div>
              <div class="max_number">
                <div>478,000</div>
                <div>最小值</div>
              </div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  totalPerformance,
  getAnalyseTransitList,
  getAnalyseVipReturnList,
  getAnalyseSellRankingsList,
  getAnalysePerformanceList,
  getAnalysePromotionList,
  getAnalyseSellTrendList
} from '@/request/store/K_ShopManager'
import { deepClone } from '@/util/util'
export default {
  name: 'K_ShopManager',
  data() {
    return {
      tabList: [
        {
          index: 1,
          name: '日报',
          active: true
        },
        {
          index: 2,
          name: '周报',
          active: true
        },
        {
          index: 3,
          name: '月报',
          active: true
        }
      ],
      type: 1,
      option: {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '',
            type: 'line',
            data: [],
            color: '#017aff',
            // markPoint: {
            //   data: [
            //     { type: 'max', name: 'Max' },
            //     { type: 'min', name: 'Min' }
            //   ]
            // },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          }
        ]
      },
      totalPerformanceList: [], // 店铺总业绩
      transferGoodsList: [], // 在线调货
      vipReturnVisitList: [], // vip回访
      salesRankingList: [], // 销售排行
      performanceList: [], // 业绩分析
      availablePromotionsList: [], // 可用促销
      salesTrendListList: {} // 销售趋势
    }
  },
  created() {
    // 请求所有的数据
    this.allQuest(this.type)
  },
  mounted() {
    this.createEcharts()
  },
  methods: {
    allQuest(type) {
      this.totalPerformance(type) // 店铺总业绩
      this.getAnalyseTransitList(type) // 店铺在途调货 无数据
      this.getAnalyseVipReturnList(type) // VIP回访
      this.getAnalyseSellRankingsList(type) // 销售排行
      this.getAnalysePerformanceList(type) // 业绩分析
      this.getAnalysePromotionList(type) // 可用促销
      this.getAnalyseSellTrendList(type) // 销售趋势
    },
    createEcharts() {
      let lineDom = this.$echarts.init(document.getElementById('lineDom'))
      lineDom.setOption(this.option)
    },
    // 设置图表
    setOption() {
      let option = deepClone(this.option)
      let salesTrendListList = deepClone(this.salesTrendListList)
      Object.keys(salesTrendListList).forEach((item, index) => {
        if (item && this.type === 1) {
          let num = salesTrendListList[item]
          let day = item.split('-')[2]
          let series = option.series
          series[0].name = `${day}日`
          series[0].data.push(num)
          option.xAxis.data.push(`${day}日`)
        } else if (item && this.type === 2) {
          let num = salesTrendListList[item]
          let week = item
          let series = option.series
          series[0].name = `${week}周`
          series[0].data.push(num)
          option.xAxis.data.push(`${week}周`)
        } else if (item && this.type === 3) {
          let num = salesTrendListList[item]
          let month = item.split('-')[1]
          let series = option.series
          series[0].name = `${month}月`
          series[0].data.push(num)
          option.xAxis.data.push(`${month}月`)
        }
      })
      this.option = option
      this.createEcharts()
    },
    // setConfig(index = 0, name) {
    //   let series = option.series
    //   series[index].name = `${name}月`
    //   series[index].data.push(num)
    //   option.xAxis.data.push(`${name}月`)
    // },
    async totalPerformance(type) {
      const { data } = await totalPerformance(type)
      console.log(data, '店铺总业绩')
      if (data && data.data && data.code === 200) {
        this.totalPerformanceList = data.data
        // console.log(this.totalPerformanceList, '店铺总业绩')
      }
    },
    // 店铺在途调货
    async getAnalyseTransitList(type) {
      const { data } = await getAnalyseTransitList(type)
      if (data && data.code === 200) {
        this.transferGoodsList = data.data
      }
      // console.log('店铺在途调货', data.data)
    },
    // VIP回访
    async getAnalyseVipReturnList(type) {
      const { data } = await getAnalyseVipReturnList(type)
      if (data && data.code === 200) {
        this.vipReturnVisitList = data.data
      }
      // console.log('VIP回访', data.data)
    },
    // 销售排行
    async getAnalyseSellRankingsList(type) {
      const { data } = await getAnalyseSellRankingsList(type)
      if (data && data.code === 200) {
        this.salesRankingList = data.data
      }
      // console.log('销售排行', this.salesRankingList)
    },
    // 业绩分析
    async getAnalysePerformanceList(type) {
      const { data } = await getAnalysePerformanceList(type)
      if (data && data.code === 200) {
        this.performanceList = data.data
      }
      // console.log('业绩分析', data.data)
    },
    // 可用促销
    async getAnalysePromotionList(type) {
      const { data } = await getAnalysePromotionList(type)
      if (data && data.code === 200) {
        this.availablePromotionsList = data.data
        // console.log(this.availablePromotionsList, '可用促销')
      }
    },
    // 销售趋势
    async getAnalyseSellTrendList(type) {
      const { data } = await getAnalyseSellTrendList(type)
      if (!data && data.code === 200) {
        this.salesTrendListList = data.data
        this.setOption()
      }
    },
    chooseTab(e) {
      this.type = e.index
      this.option.xAxis.data = []
      this.option.series[0].data = []
      console.log(this.option.xAxis)
      this.allQuest(this.type)
    }
  }
}
</script>

<style lang="less" scoped>
.active {
  margin-right: 15px;
  // padding: 0 15px;
  height: 87.5vh;
  position: relative;
  background-color: #f4f4f4;
}
.top_wrap {
  // width: 100%;
  display: flex;
  justify-content: center;
  background-color: #fff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  // border-bottom-width: 90%;
  border-bottom: 2px solid #f6f6f6;
  .tab_item {
    width: 80px;
    margin: 0 30px;
    text-align: center;
    cursor: pointer;
  }
  .active_tab_item {
    color: #017aff;
    border-bottom: 2px solid #017aff;
  }
}
.content_wrap {
  display: flex;
  height: 100px;
  background-color: #fff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  .conter_item {
    flex: 1;
  }
  .left_wrap {
    display: flex;
    // background-color: salmon;
    border-right: 1px solid #f6f6f6;
    .left_item {
      flex: 1;
      height: 60px;
      text-align: center;
      justify-content: space-around;
      margin-top: 15px;
      // background-color: rgb(177, 250, 7);
      .l_name {
        width: 50%;
        line-height: 30px;
        margin-left: 25%;
        margin-bottom: 10px;
      }
      .l_number {
        width: 50%;
        line-height: 30px;
        margin-left: 25%;
        text-align: center;
        border-radius: 20px;
        background-color: #017aff;
        color: #fff;
      }
    }
    .center_item {
      flex: 1;
      height: 60px;
      text-align: center;
      justify-content: space-around;
      margin-top: 15px;
      // background-color: rebeccapurple;
      .c_name {
        line-height: 30px;
        margin-bottom: 10px;
      }
    }
    .right_item {
      flex: 1;
      height: 60px;
      text-align: center;
      justify-content: space-around;
      margin-top: 15px;
      // background-color: rgb(224, 247, 22);
      .r_name {
        line-height: 30px;
        margin-bottom: 10px;
      }
    }
  }
  .centre_wrap {
    border-right: 1px solid #f6f6f6;
    .centre_top_item {
      margin-top: 15px;
      line-height: 30px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-around;
    }
    .centre_bottom_item {
      line-height: 30px;
      display: flex;
      // justify-content: space-evenly;
      justify-content: space-around;
      .c_cj {
        display: flex;
        justify-content: space-around;
        width: 150px;
        border-radius: 20px;
        background-color: #017aff;
        color: #fff;
      }
    }
  }
  .right_wrap {
    display: flex;
    // background-color: seagreen;
    .right_item {
      flex: 1;
      height: 60px;
      text-align: center;
      justify-content: space-around;
      margin-top: 15px;
      // background-color: rgb(177, 250, 7);
      .r_name {
        width: 50%;
        line-height: 30px;
        margin-left: 25%;
        margin-bottom: 10px;
      }
      .r_number {
        width: 70%;
        line-height: 30px;
        margin-left: 20%;
        text-align: center;
        border-radius: 20px;
        background-color: #017aff;
        color: #fff;
      }
    }
    .center_item {
      flex: 1;
      height: 60px;
      text-align: center;
      justify-content: space-around;
      margin-top: 10px;
      // background-color: rebeccapurple;
      .c_name {
        line-height: 30px;
        margin-bottom: 10px;
      }
    }
    .right_item {
      flex: 1;
      height: 60px;
      text-align: center;
      justify-content: space-around;
      margin-top: 10px;
      // background-color: rgb(224, 247, 22);
      .r_name {
        line-height: 30px;
        margin-bottom: 10px;
      }
    }
  }
}
.bottom {
  // background-color: red;
  margin-top: 16px;
}
.bottom_wrap {
  display: flex;
  margin-top: 16px;
  .bottom_item {
    // flex: 1;
    width: 49%;
    // height: 400px;
  }
  .bottom_left {
    // width: 100%;
    padding-left: 16px;
    padding-bottom: 16px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #fff;
    // overflow-x: scroll;
    .l_name {
      // height: 40px;
      margin-top: 10px;
      margin-bottom: 10px;
      line-height: 20px;
      text-indent: 10px;
      border-left: 4px solid #017aff;
    }
    // .l_table {
    //   // padding-right: 16px;
    //   .line {
    //     width: 50%;
    //   }
    // }
  }
  .bottom_right {
    // width: 100%;
    margin-left: 32px;
    padding-left: 16px;
    padding-bottom: 16px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    // overflow-x: scroll;
    // white-space: nowrap;
    background-color: #fff;
    .r_name {
      margin-top: 10px;
      margin-bottom: 10px;
      line-height: 20px;
      text-indent: 10px;
      border-left: 4px solid #017aff;
    }
    .sales {
      display: flex;
      // height: 60px;
      // .left_sales {
      //   // margin-left: 16px;
      // }
      .right_sales {
        margin-right: 30px;
        margin-left: 50px;
        // background-color: oldlace;
        div {
          height: 20px;
          margin-bottom: 5px;
          color: #017aff;
          cursor: pointer;
        }
      }
    }
    .line_wrap {
      display: flex;
      height: 350px;
      .left_line {
        width: 90%;
      }
      .right_line {
        width: 10%;
        margin-top: 60px;
        .max_number {
          margin-bottom: 60px;
          font-size: 14px;
          text-align: center;
          // background-color: olive;
        }
      }
    }
  }
  .line {
    position: relative;
    .null_data {
      position: absolute;
      top: 45%;
      left: 45%;
      color: #8a8a8a;
    }
  }
}
</style>
